<template>
	<view class="home">
		<u-swiper :list="list" previousMargin="30" nextMargin="30" circular></u-swiper>
		<!-- #ifdef MP-WEIXIN -->
	  <u-sticky>
		<!-- #endif -->
			<view class="tabs">
				<u-tabs lineWidth="30" lineColor="#f56c6c" :activeStyle="{
					 						color: '#303133',
					 						fontWeight: 'bold',
					 						transform: 'scale(1.05)'
					 					}" :inactiveStyle="{
					 						color: '#606266',
					 						transform: 'scale(1)'
					 					}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" :current="current" sticky
					:list="tablist" @click="click"></u-tabs>
			</view>
		<!-- #ifdef MP-WEIXIN -->
		</u-sticky>
		<!-- #endif -->
		<view class="hotPic">
			<view v-for="(item,index) in hotData" :key="index" class="imgItem">
				<image :src="item" @click="TanPreviewImage(item)"></image>
			</view>
		</view>
		<tabbar :current="0"></tabbar>
	</view>
</template>
<script>
	import tabbar from '@/components/tabbar/index.vue'
	import data from '@/static/data.js'
	export default {
		data() {
			return {
				list: [],
				tablist: [{
						name: '热门推荐'
					},
					{
						name: '精选'
					},
					{
						name: '最新'
					},
				],
				current: 0,
				hotData: []
			}
		},
		components: {
			tabbar
		},
		mounted() {
			this.list = data.swiperData
			this.hotData = data.hotData
		},
		onShow() {
			uni.hideTabBar({
				animation: false
			})
		},
		methods: {
			click(item) {
				this.current = item.index
				uni.pageScrollTo({
				  scrollTop: 130,
				  duration: 300,
				});
				switch (this.current){
					case 0:
					  this.hotData = data.hotData
						break;
					case 1:
					  this.hotData = data.selectData
						break;
					case 2:
					  this.hotData = data.newData
						break;
					default:
					  this.hotData = data.hotData
						break;
				}
				console.log('item', item, )
			},
			TanPreviewImage(imageUrl) {
				console.log(imageUrl) // http://192.168.100.251:8970/6_1597822634094.png
				var images = [];
				images.push(imageUrl);
				console.log(images) // ["http://192.168.100.251:8970/6_1597822634094.png"]
				uni.previewImage({ // 预览图片  图片路径必须是一个数组 => ["http://192.168.100.251:8970/6_1597822634094.png"]
					current: 0,
					urls: images,
					longPressActions: { //长按保存图片到相册
						itemList: ['保存图片'],
						success: (data) => {
							console.log(data);
							uni.saveImageToPhotosAlbum({ //保存图片到相册
								filePath: payUrl,
								success: function() {
									uni.showToast({
										icon: 'success',
										title: '保存成功'
									})
								},
								fail: (err) => {
									uni.showToast({
										icon: 'none',
										title: '保存失败，请重新尝试'
									})
								}
							});
						},
						fail: (err) => {
							console.log(err.errMsg);
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.home {
		padding-bottom: 120rpx;
	}

	.tabs {
		padding: 10px 0;
		border-bottom: 1px solid #f3f3f3;
		background: #FFFFFF;
	}

	.hotPic {
		display: flex;
		flex-direction: column;
		align-items: center;

		.imgItem {
			width: 100%;
			height: 400rpx;
			padding: 10rpx 20rpx;
			box-sizing: border-box;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10px;
			}
		}
	}
</style>
